<template>
  <div class="left-slider" :style="{ width: leftWidth }">
    <Logo />
    <el-scrollbar>
      <el-menu
        active-text-color="#409EFF"
        background-color="#0d356c"
        class="el-menu-vertical-demo"
        :collapse="leftCollapse"
        :collapse-transition="false"
        :default-active="activeRoute"
        text-color="#fff"
        :unique-opened="true"
        @select="select"
      >
        <SliderItem
          v-for="item in $store.getters['menu/getSessionPostMenuTree']"
          :key="item.menuId"
          :item="item"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>
<script>
import SliderItem from './SliderItem'
import Logo from './Logo'
export default {
  name: 'LeftSlider',
  components: {
    SliderItem,
    Logo
  },
  props: {
    allRoutes: {
      type: Array,
      default: () => []
    },
    leftWidth: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 根据当前路由打开slider对应的折叠部分
    activeRoute() {
      const route = this.$route
      const { path } = route
      return path
    },
    leftCollapse() {
      return this.$store.getters['style/getLeftCollapse']
    }
  },
  methods: {
    select(index) {
      if (this.$route.path === index) {
        return
      }
      this.$router.push(index)
    }
  }
}
</script>
<style lang="scss" scoped>
.left-slider {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  background-color: #0d356c;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  height: 100%;
  border: none;
  background-color: #0d356c;
}

.el-scrollbar {
  position: absolute;
  top: 50px;
  bottom: 0px;
  right: 0px;
  left: 0px;
}

/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}

/deep/ .el-menu--collapse {
  border: none;
}
/deep/ .el-menu-item {
  text-align: left !important;
  color: #ffffff;
}
// .el-menu-item.is-active {
//   color: green !important;
// }

/deep/ .el-submenu__title {
  text-align: left !important;
  // color: #ffffff !important;
}
/deep/.el-menu--collapse .el-submenu {
  .el-submenu__icon-arrow,
  span {
    display: none;
  }
}
// 侧边栏active的样式
/deep/ .el-menu-item.is-active {
  border-right: 10px solid #ffd71a;
  background-color: #00264a !important;
  i,
  span {
    // color: #2b8cfd !important;
    background-image: -webkit-linear-gradient(bottom, #2b8cfd, #22c1fe);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
</style>
